<template>
  <div>
    <div class="container">
      <div class="loginForm">
        <div class="title">
          <img src="../../../static/pic/img/title-login.png" alt="" />
        </div>

        <div class="form">
          <!-- <form id="loginForm" action="" method="POST" @submit="submit"> -->
          <p class="p1">
            <label for="account">账号：</label>
            <input
              type="text"
              class="account"
              id="account"
              name="username"
              placeholder="请输入账号"
              v-model="userId"
            />
          </p>
          <p class="p2">
            <label for="password">密码：</label>
            <input
              type="password"
              class="password"
              id="password"
              name="password"
              placeholder="请输入密码"
              v-model="password"
            />
          </p>
          <button class="login" @click="login">登录</button>
          <a></a>
          <!-- <button type="submit" class="login" value="登录"> -->
          <!-- </form> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios"
// import qs from "qs"

import Vue from "vue";
import axios from 'axios'

export default {
  name: "Login",
  data() {
    return {
      userId: "",
      password: ""
      // userId: '2018009602',
      // password: 'Aiit@6044137796',
    };
  },
  methods: {
    submit: function(e) {
      console.log(e);
    },
    login() {
      let self = this
       $.ajax({
         type: 'POST',
         url: this.api + 'propertyLogin',
         headers: {
           'Content-Type': 'application/json',
           'X-Requested-With': 'XMLHttpRequest'
         },
         xhrFields: {
           withCredentials: true
         },
         dataType: 'json',
         data: JSON.stringify({
           'userId': self.userId,
           'password': self.password
         }),
         success (data) {
           switch (data.status) {
             case 1:
               self.$message({
                 message: '登陆成功！',
                 type: 'success'
               })
               sessionStorage.setItem('userId',data.id)
               sessionStorage.setItem('userName',data.name)
               sessionStorage.setItem('password',self.password)
               sessionStorage.setItem('roleId',2)
               self.$router.push("/generalAdmin/generalAdminHome");
               break;
             case 2:
               self.$message({
                 message: '未找到该账号！',
                 type: 'error'
               })
               break;
             case 3:
               self.$message({
                 message: '密码错误！',
                 type: 'error'
               })
               break;
           }
         },
         error(){
           self.$message({
             message: '服务器无响应！',
             type: 'error'
           })
         }
       })

    // if (this.userId == "admin" && this.password == "123") {
    //   this.$router.push("/admin");
    // } else if (this.userId == "user" && this.password == "123") {
    //   this.$router.push("/user");
    // }
  },

  },


};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.container {
  width: 100%;
  height: 100%;
  background: url("../../../static/pic/img/bg-login2.jpg");
  background-size: 100% 100%;
  position: fixed;
}

.loginForm {
  width: 500px;
  height: 100%;
  background: #fff;
  position: fixed;
  right: 0;
  top: 0;
}

.title {
  text-align: center;
  margin-top: 100px;
}

.title img {
  max-width: 100%;
  margin: 0 auto;
}

.form .p1,
.p2 {
  margin-top: 40px;
  margin-left: 100px;
}

.form .account,
.password {
  width: 200px;
  height: 20px;
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 5px;
}

.form .login {
  width: 200px;
  height: 30px;
  background: #0a9dc7;
  margin-left: 175px;
  margin-top: 30px;
  border-radius: 10px;
}
</style>
